<template>
  <transition name="el-zoom-in-top">
  <div class="important-box" v-loading.body="listLoading"
       v-show="showwarning"  >
    <div class="dailog-header">
       <div class="dailog-header-title">重要报警信息</div>
       <i class="el-icon-close close-icon" @click="closeWarning"></i>
    </div>
    <div class="dailog-body">
      <ul class="warning-content">
        <li v-for="item in list">
          <div class="warning-text"> 手机号 {{item.telephone || '***'}} 的用户车辆发生了{{item.type==0?'震动报警':item.type==3?'断电报警':item.type==5?'电子围栏报警':'移动报警'}}，请及时处理！</div>
          <div class="warning-btn">
            <el-button type="primary" plain size="small" @click="openwarning(item)">处理</el-button>
          </div>
        </li>
      </ul>
      <Pagations :totalCount="totalCount" @changePage="changePage" :pageSize="5"></Pagations>
    </div>
    <Handlewarning  :show.sync="show" :row="row" v-on:submit="submit" v-on:close="close"></Handlewarning>
  </div>
  </transition>
</template>

<script>
  import Pagations from '@/components/pagations'
  import { getimportantwarningList } from '@/api/list'
  import Handlewarning from '../warningrecord/handlewarning'
  import Handlewarn from '@/mixins/handleWarning'

  export default {
    name: 'Importantwarning',
    mixins:[Handlewarn],
    components: {
      Pagations,
      Handlewarning
    },
    props: {
      showwarning: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showwarning: function () {
        this.visible = this.showwarning
      }
    },
    data() {
      return {
        list: [],
        listLoading: false,
        totalCount: 0,
        listQuery: {
          pageSize: 5,
          currentPage: 1
        },
        timer: null,
        visible: this.showwarning
      }
    },
    created() {
      const that = this;
      (function initdata() {
        that.fetchData(that.listQuery)
        that.timer = setTimeout(function () {
          initdata()
        }, 10000)
      })()

    },
    methods: {
      closeWarning() {
        this.$emit('closeWarning',this.timer)
      },
      changePage: function(val) {
        this.fetchData({
          pageSize: 5,
          currentPage: val
        })
      },
      fetchData(query) {
        this.listLoading = true
        getimportantwarningList(query).then(response => {
          if (response && response.body) {
            this.list = response.body.trackerWarningResponseList
            this.totalCount = response.body.count
          } else {
            this.list = []
            this.totalCount = 0
            clearTimeout(this.timer)
          }
          this.$emit('countImportant',this.list)
          this.listLoading = false
        })
      }
    },
    beforeDestroy(){
      clearTimeout(this.timer)
    }
  }
</script>

<style scoped>
 .important-box{
   position: absolute;
   min-width: 600px;
   bottom: 50px;
   background-color: #fff;
   right: 50px;
   padding: 10px;
   -moz-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); /* 老的 Firefox */
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   border-radius: 6px;
   border: 1px solid #ccc;
 }
  .dailog-header{
    text-align: right;
    padding-top: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
  }
 .dailog-header-title{
   color:#409EFF
   }
  .close-icon{
    flex: 1;
  }
  .dailog-body{
    padding-top: 15px;
  }
  .warning-content li{
    list-style: none;
    padding: 10px;
    display: flex;
    border-bottom: 1px solid #eee;
  }
  .warning-text{
    flex: 1;
  }

</style>
